<template>
    <el-container class="main" style="height:100vh;min-width:1200px">
        <Aside></Aside>
        <el-container style="display:block;">
            <Header></Header>
            <el-scrollbar class="scroll-container" style=" height: calc(100vh - 92px);">
                <el-main style="background-color:#eee;padding:15px;">
                    <el-card :style="{ minHeight: (clienHeight - 124) + 'px' }">
                        <router-view></router-view>
                    </el-card>
                </el-main>
            </el-scrollbar>
        </el-container>
    </el-container>
</template>

<script>
import Aside from './AsidePage.vue'
import Header from './HeaderPage.vue'
import { mapMutations, mapState } from 'vuex';
export default {
    name: 'main-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
        }
    },

    watch: {
        $route: {
            handler(newValue) {
                // console.log('advawefqwefqwe', newValue);
                let title = (newValue.meta.parentName ? newValue.meta.parentName + "-" : '') + newValue.meta.title
                this.$store.commit('changeRouterTitle', title)
                // console.log('变化了路由');
                let obj = Object.assign({
                    path: newValue.path,
                    name: newValue.name,
                }, newValue.meta)
                this.addtabList(obj)
            },
            immediate: true,
        }
    },
    computed: {
        ...mapState(['clienHeight'])
    },
    methods: {
        ...mapMutations(['addtabList', 'changclienHeight']),
    },
    components: {
        Aside,
        Header,
    },
    created() {
        window.addEventListener('resize', () => {
            this.changclienHeight()
        })
    }
}
</script>

<style scoped lang="less">
.main {
    height: 100vh;
    border: 1px solid #eee;

    /deep/ .el-scrollbar__wrap {
        overflow-x: hidden !important;
    }

    // /deep/ .el-scrollbar__bar {
    //     display: none;
    // }
}
</style>